﻿<template>
  <BasicPopup v-bind="$attrs" @register="registerPopup" :title="title" showOkBtn destroyOnClose okText="确定"
    cancelText="取消" :showContinueBtn="showContinueBtn" :continueText="continueText" @ok="handleSubmit(0)"
    @continue="handleSubmit(1)" :closeFunc="onClose">
    <template #insertToolbar>
      <a-space :size="10" v-if="dataForm.id">
      </a-space>
    </template>
    <a-row class="dynamic-form p-10px" :style="{ margin: '0 auto', width: '100%' }">
      <a-form :colon="false" layout="horizontal" labelAlign="right" :labelCol="{ style: { width: '100px' } }"
        :model="dataForm" :rules="dataRule" ref="formRef">
        <a-row :gutter="5">
          <a-col :span="14" class="ant-col-item">
            <a-card class="mb-20">
              <template #title>查询</template>
              <a-col :span="24">
                <table class="table-grid-box"
                  :style="{ '--borderType': 'none', '--borderColor': '#E2E0E0', '--borderWidth': '1px' }">
                  <tbody>
                    <tr>
                      <td colspan="1" rowspan="1" :style="{ '--backgroundColor': '' }">
                        <a-col :span="6" class="ant-col-item">
                          <a-form-item name="customerCode">
                            <template #label>用户编号</template>
                            <JnpfInput v-model:value="dataForm.customerCode" placeholder="请输入" allowClear
                              :style='{ "width": "100%" }' />
                          </a-form-item>
                        </a-col>
                        <a-col :span="6" class="ant-col-item">
                          <a-form-item name="mobilePhone">
                            <template #label>手机号码</template>
                            <JnpfInput v-model:value="dataForm.mobilePhone" placeholder="请输入" allowClear
                              :style='{ "width": "100%" }' />
                          </a-form-item>
                        </a-col>
                        <a-col :span="6" class="ant-col-item">
                          <a-form-item name="firstMeterFactory">
                            <template #label>水表编号</template>
                            <JnpfInput v-model:value="dataForm.firstMeterFactory" placeholder="请输入" allowClear
                              :style='{ "width": "100%" }' />
                          </a-form-item>
                        </a-col>
                        <a-col :span="6" class="ant-col-item">
                          <a-form-item name="magcartNumber">
                            <template #label>缴费卡号</template>
                            <JnpfInput v-model:value="dataForm.magcartNumber" placeholder="请输入" allowClear
                              :style='{ "width": "100%" }' />
                          </a-form-item>
                        </a-col>
                        <a-col :span="10" class="ant-col-item">
                          <a-form-item name="name">
                            <template #label>姓名</template>
                            <JnpfInput v-model:value="dataForm.name" placeholder="请输入" allowClear
                              :style='{ "width": "100%" }' />
                          </a-form-item>
                        </a-col>
                        <a-col :span="10" class="ant-col-item">
                          <a-form-item name="address">
                            <template #label>地址</template>
                            <JnpfInput v-model:value="dataForm.address" placeholder="请输入" allowClear
                              :style='{ "width": "100%" }' />
                          </a-form-item>
                        </a-col>
                        <a-col :span="2" class="ant-col-item">
                          <a-form-item>
                            <JnpfButton align="left" buttonText="按钮" />
                          </a-form-item>
                        </a-col>
                        <a-col :span="2" class="ant-col-item">
                          <a-form-item>
                            <JnpfButton align="left" buttonText="按钮" />
                          </a-form-item>
                        </a-col>
                      </td>
                    </tr>
                    <tr>
                      <td colspan="1" rowspan="1" :style="{ '--backgroundColor': '' }">
                        <a-col :span="8" class="ant-col-item">
                          <a-form-item name="addicationInt2Flag">
                            <template #label>应收金额</template>
                            <JnpfInputNumber v-model:value="dataForm.addicationInt2Flag" placeholder="请输入"
                              :style='{ "width": "100%" }' />
                          </a-form-item>
                        </a-col>
                        <a-col :span="8" class="ant-col-item">
                          <a-form-item name="addicationDecimal2Flag">
                            <template #label>水费金额</template>
                            <JnpfInputNumber v-model:value="dataForm.addicationDecimal2Flag" placeholder="请输入"
                              :style='{ "width": "100%" }' />
                          </a-form-item>
                        </a-col>
                        <a-col :span="8" class="ant-col-item">
                          <a-form-item name="addicationDecimal1Flag">
                            <template #label>余额</template>
                            <JnpfInputNumber v-model:value="dataForm.addicationDecimal1Flag" placeholder="请输入"
                              :style='{ "width": "100%" }' />
                          </a-form-item>
                        </a-col>
                        <a-col :span="8" class="ant-col-item">
                          <a-form-item name="addicationInt3Flag">
                            <template #label>实收金额</template>
                            <JnpfInputNumber v-model:value="dataForm.addicationInt3Flag" placeholder="请输入"
                              :style='{ "width": "100%" }' />
                          </a-form-item>
                        </a-col>
                        <a-col :span="8" class="ant-col-item">
                          <a-form-item name="addicationInt1Flag">
                            <template #label>合计金额</template>
                            <JnpfInputNumber v-model:value="dataForm.addicationInt1Flag" placeholder="请输入"
                              :style='{ "width": "100%" }' />
                          </a-form-item>
                        </a-col>
                        <a-col :span="8" class="ant-col-item">
                          <a-form-item name="addicationDecimal3Flag">
                            <template #label>违约金</template>
                            <JnpfInputNumber v-model:value="dataForm.addicationDecimal3Flag" placeholder="请输入"
                              :style='{ "width": "100%" }' />
                          </a-form-item>
                        </a-col>
                      </td>
                    </tr>
                    <tr>
                      <td colspan="1" rowspan="1" :style="{ '--backgroundColor': '' }">
                        <a-col :span="24" class="ant-col-item">
                          <a-form-item>
                            <JnpfAlert type="info" :closable="true" :show-icon="true" title="这是一个提示" />
                          </a-form-item>
                        </a-col>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </a-col>
            </a-card>
          </a-col>
          <a-col :span="6" class="ant-col-item">
            <a-card class="mb-20">
              <template #title>缴费选项</template>
              <a-col :span="24" class="ant-col-item">
                <a-form-item name="addication1Flag">
                  <template #label>附加字段1</template>
                  <JnpfSelect v-model:value="dataForm.addication1Flag" placeholder="请选择"
                    :options="optionsObj.addication1FlagOptions" :fieldNames="optionsObj.addication1FlagProps" allowClear
                    :style='{ "width": "100%" }' />
                </a-form-item>
              </a-col>
              <a-col :span="24" class="ant-col-item">
                <a-form-item name="addicationBolen1Flag">
                  <template #label>附加布尔字段1</template>
                  <JnpfSwitch v-model:value="dataForm.addicationBolen1Flag" />
                </a-form-item>
              </a-col>
              <a-col :span="24" class="ant-col-item">
                <a-form-item name="addication2Flag">
                  <template #label>附加字段2</template>
                  <JnpfSelect v-model:value="dataForm.addication2Flag" placeholder="请选择"
                    :options="optionsObj.addication2FlagOptions" :fieldNames="optionsObj.addication2FlagProps" allowClear
                    :style='{ "width": "100%" }' />
                </a-form-item>
              </a-col>
              <a-col :span="24" class="ant-col-item">
                <a-form-item name="addicationBolen2Flag">
                  <template #label>附加布尔字段2</template>
                  <JnpfSwitch v-model:value="dataForm.addicationBolen2Flag" />
                </a-form-item>
              </a-col>
              <a-col :span="24" class="ant-col-item">
                <a-form-item name="addication3Flag">
                  <template #label>附加字段3</template>
                  <JnpfSelect v-model:value="dataForm.addication3Flag" placeholder="请选择"
                    :options="optionsObj.addication3FlagOptions" :fieldNames="optionsObj.addication3FlagProps" allowClear
                    :style='{ "width": "100%" }' />
                </a-form-item>
              </a-col>
            </a-card>
          </a-col>
          <a-col :span="4" class="ant-col-item">
            <a-card class="mb-20">
              <template #title>操作</template>
              <a-col :span="24" class="ant-col-item">
                <a-form-item>
                  <JnpfButton align="left" buttonText="按钮" />
                </a-form-item>
              </a-col>
              <a-col :span="24" class="ant-col-item">
                <a-form-item>
                  <JnpfButton align="left" buttonText="按钮" />
                </a-form-item>
              </a-col>
              <a-col :span="24" class="ant-col-item">
                <a-form-item>
                  <JnpfButton align="left" buttonText="按钮" />
                </a-form-item>
              </a-col>
            </a-card>
          </a-col>
          <a-col :span="24" class="ant-col-item">
            <a-tabs v-model:activeKey="state.active1" type="" tabPosition="top" class="mb-20">
              <a-tab-pane tab="Tab 1" key="1" forceRender>
                <a-col :span="24" class="ant-col-item">
                  <a-form-item>
                    <JnpfAlert type="success" :closable="true" :show-icon="false" title="这是一个提示" description="2332" />
                  </a-form-item>
                </a-col>
              </a-tab-pane>
              <a-tab-pane tab="Tab 2" key="2" forceRender>
              </a-tab-pane>
            </a-tabs>
          </a-col>
        </a-row>
      </a-form>
    </a-row>
  </BasicPopup>
</template>
<script lang="ts" setup>
import { getInfo } from './helper/api';
import { reactive, toRefs, nextTick, ref, unref } from 'vue';
import { BasicPopup, usePopup } from '/@/components/Popup';
import { useMessage } from '/@/hooks/web/useMessage';
import type { FormInstance } from 'ant-design-vue';

interface State {
  dataForm: any;
  dataRule: any;
  optionsObj: any;
  active1: any;
  title: string;
  continueText: string;
  allList: any[];
  currIndex: number;
  isContinue: boolean;
  submitType: number;
  showContinueBtn: boolean;
}

const emit = defineEmits(['reload']);
const { createMessage } = useMessage();
const [registerPopup, { openPopup, setPopupProps }] = usePopup();
const formRef = ref<FormInstance>();
const state = reactive<State>({
  dataForm: {
    id: '',
    customerCode: undefined,
    mobilePhone: undefined,
    firstMeterFactory: undefined,
    magcartNumber: undefined,
    name: undefined,
    address: undefined,
    addicationInt2Flag: undefined,
    addicationDecimal2Flag: undefined,
    addicationDecimal1Flag: undefined,
    addicationInt3Flag: undefined,
    addicationInt1Flag: undefined,
    addicationDecimal3Flag: undefined,
    addication1Flag: undefined,
    addicationBolen1Flag: 0,
    addication2Flag: undefined,
    addicationBolen2Flag: 0,
    addication3Flag: undefined,
  },
  dataRule: {
  },
  active1: "1",
  optionsObj: {
    addication1FlagOptions: [],
    addication1FlagProps: { 'label': 'fullName', 'value': 'id' },
    addication2FlagOptions: [{ 'fullName': "选项一", 'id': "1" }, { 'fullName': "选项二", 'id': "2" }],
    addication2FlagProps: { 'label': 'fullName', 'value': 'id' },
    addication3FlagOptions: [{ 'fullName': "选项一", 'id': "1" }, { 'fullName': "选项二", 'id': "2" }],
    addication3FlagProps: { 'label': 'fullName', 'value': 'id' },
  },
  title: '',
  continueText: '',
  allList: [],
  currIndex: 0,
  isContinue: false,
  submitType: 0,
  showContinueBtn: true,
});
const { title, continueText, showContinueBtn, dataForm, dataRule, optionsObj } = toRefs(state);

defineExpose({ init });

function init(data) {
  state.showContinueBtn = false;
  state.title = !data.id ? '新增' : '编辑';
  state.continueText = !data.id ? '确定并新增' : '确定并继续';
  setFormProps({ continueLoading: false });
  state.dataForm.id = data.id;
  openPopup();
  state.allList = data.allList;
  state.currIndex = state.allList.length && data.id ? state.allList.findIndex((item) => item.id === data.id) : 0;
  nextTick(() => {
    getForm().resetFields();
    setTimeout(initData, 0);
  });
}
function initData() {
  changeLoading(true);
  if (state.dataForm.id) {
    getData(state.dataForm.id);
  } else {
    // 设置默认值
    state.dataForm = {
      customerCode: undefined,
      mobilePhone: undefined,
      firstMeterFactory: undefined,
      magcartNumber: undefined,
      name: undefined,
      address: undefined,
      addicationInt2Flag: undefined,
      addicationDecimal2Flag: undefined,
      addicationDecimal1Flag: undefined,
      addicationInt3Flag: undefined,
      addicationInt1Flag: undefined,
      addicationDecimal3Flag: undefined,
      addication1Flag: undefined,
      addicationBolen1Flag: 0,
      addication2Flag: undefined,
      addicationBolen2Flag: 0,
      addication3Flag: undefined,
    };
    changeLoading(false);
  }
}
function getForm() {
  const form = unref(formRef);
  if (!form) {
    throw new Error('form is null!');
  }
  return form;
}
function getData(id) {
  getInfo(id).then((res) => {
    state.dataForm = res.data || {};
    changeLoading(false);
  });
}
async function handleSubmit(type) {
  try {
    const values = await getForm()?.validate();
    if (!values) return;
    state.submitType = type;
    state.submitType === 1 ? setFormProps({ continueLoading: true }) : setFormProps({ confirmLoading: true });
    const formMethod = state.dataForm.id ? update : create;
    formMethod(state.dataForm)
      .then((res) => {
        createMessage.success(res.msg);
        state.submitType === 1 ? setFormProps({ continueLoading: false }) : setFormProps({ confirmLoading: false });
        if (state.submitType == 1) {
          initData();
          state.isContinue = true;
        } else {
          setFormProps({ visible: false });
          emit('reload');
        }
      })
      .catch(() => {
        state.submitType === 1 ? setFormProps({ continueLoading: false }) : setFormProps({ confirmLoading: false });
      });
  } catch (_) { }
}


function setFormProps(data) {
  setPopupProps(data);
}
function changeLoading(loading) {
  setPopupProps({ loading });
}
async function onClose() {
  if (state.isContinue) emit('reload');
  return true;
}

</script>
